<template>
  <n-modal
    v-model:show="show"
    class="custom-card"
    style="width: 800px"
    preset="card"
    title="卡片预设"
    size="huge"
    :bordered="false"
    @after-leave="() => emit('handle-modal-cancel')"
  >
    <CustomForm
      :model="props.formModel"
      :span="props.span"
      :rules="props.formRules"
      :list="props.formList"
      @handle-submit="() => emit('handle-modal-submit')"
      @handle-cancel="() => emit('handle-modal-cancel')"
    />
  </n-modal>
</template>

<script setup lang="ts" generic="F extends { [x: string]: any }, M extends Partial<Record<keyof F, any>>">
import { FormRules } from 'naive-ui'

import CustomForm from '@/components/CustomForm.vue'
import { FormInputList } from '@/types/interface'

interface Props {
  span?: number
  show: boolean
  formRules: FormRules
  formList: FormInputList<F>
  formModel: M
  submitText?: string
  cancelText?: string
}
const props = withDefaults(defineProps<Props>(), {
  span: 24,
  submitText: 'common.submit',
  cancelText: 'common.cancel',
  rules: undefined,
})

const emit = defineEmits<{
  (e: 'handle-modal-cancel'): void
  (e: 'handle-modal-submit'): void
  (e: 'update:show', value: boolean): void
}>()

const show = computed({
  get: () => props.show,
  set: (value) => emit('update:show', value),
})
</script>

<style scoped lang="less">
//
</style>
